<template>
    <div class="navbar">
        <van-icon name="arrow-left" @click="back"/>
        <span class="title">{{title}}</span>
        <div>
            <span class="right-text" v-if="rightText">{{rightText}}</span>
            <van-icon :name="rightIcon" v-if="rightIcon" size="20" @click.stop="rightClick"/>
        </div>
    </div>
</template>
<script>
export default {
    name: 'NavBar',
    props:['title','rightIcon','rightText','rightIconClick'],
    methods:{
        back() {
            this.$animateBack();
        },
        rightClick() {
            this.$emit('rightIconClick');
        }
    }
}
</script>
<style lang="less" scoped>
@import '../../css/var.less';
.navbar {
    position: fixed;
    -webkit-transform: translateZ(0);
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 @space;
    box-sizing:border-box;
    background:#fff;
    .title {
        font-size:18px;
    }
    .iconfont {
        font-size: 20px;
    }
}
</style>